<template>
	<view>
		<view class="common"><text><text class="vertLine"></text>常用应用</text></view>
		<view class="noContent" v-if="isData">
			<img :src="nodata" alt="">
			<view class="">
				暂无数据
			</view>
		</view>
		<view class="uni-grid">
			<view class="grid-9">
				<view class="uni-grid-9 padding-bottom30">
					<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in comflow" :key="index"
					 :data-data="item" :item="item">
						<view class="badge" @tap="removeflow(item,index)">
							<label class="font-size20 color-FF0000 iconfont icon-jian" />
						</view>
						<view class="uni-grid-9-ico" :style="{'background':item.F_IconBackground|| '#008cff'}">
							<view class="icon-box-lin">
								<label class="font-size60" :class="item.F_Icon" style="color: #FFFFFF;" />
							</view>
						</view>
						<text class="uni-grid-9-text" :class="item.F_FullName.length>5?'overflow-text':''">{{item.F_FullName}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="uni-grid">
			<view class="grid-9" v-for="(items,key) in flowdata" :key="key">
				<view class="common"><text><text class="vertLine"></text>{{items.fullName}}</text>
					<label class="mark" v-if="items.data.length>0">({{items.data.length}})</label>
				</view>
				<view class="uni-grid-9 padding-bottom30">
					<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in items.data" :key="index"
					 :data-data="item" :item="item">
						<view class="badge" @tap="addflow(item,index)">
							<label class="font-size20 iconfont icon-jia11" :class="item.F_Iscom==true?'color-9A9A9A':'color-0E80D2'" />
						</view>
						<view class="uni-grid-9-ico" :style="{'background':item.F_IconBackground|| '#008cff'}">
							<view class="icon-box-lin">
								<label class="font-size60" :class="item.F_Icon" style="color: #FFFFFF;" />
							</view>
						</view>
						<text class="uni-grid-9-text" :class="item.F_FullName.length>5?'overflow-text':''">{{item.F_FullName}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import helper from '@/common/js/helper.js'
	import config from '@/common/js/config.js'
	export default {
		data() {
			return {
				flowdata: [],
				comflow: [],
				flowEngine: [],
				fullname: [],
				nodata: config.Resources.message.nodata,
				isData: false,
			}
		},
		computed: {
			// comflows: function() {
			// 	let _this = this;
			// 	let flows = this.comflow;
			// 	for (let i = 0; i < flows.length; i++) {
			// 		if (flows[i].F_IconBackground != "") {
			// 			flows[i].F_IconColor = 'text' + flows[i].F_IconBackground.slice(2)
			// 		} else {
			// 			flows[i].F_IconColor = 'text-default'
			// 		}
			// 	}
			// 	return flows;
			// }
		},
		watch: {
			comflows() {},

		},
		onLoad() {
			let _slfe = this;
			setTimeout(function() {
				try {
					const _data = uni.getStorageSync(config.Global.cache + '_FlowEngineList');
					if (_data == '') {
						_slfe.isData = true;
						return
					}
					_slfe.flowEngine = _data
					_slfe.isData = false
					if (_data) {
						let groupData = jnpf.dictionaryData("WorkFlowCategory");
						for (let category in groupData) {
							let childNodes = helper.jsonFind(_data, function(v) {
								return v.F_Category == groupData[category].value
							});
							if (childNodes.length > 0) {
								_slfe.flowdata.push({
									id: category,
									fullName: groupData[category].label,
									data: childNodes
								})
							}
						}
						const comflow = uni.getStorageSync(config.Global.cache + '_appsoftware_key');

						_slfe.comflow = comflow;
					}
				} catch (e) {}
			}, 200);
		},
		methods: {
			/* 添加应用 */
			addflow(e, index) {

				if (e.F_Iscom == false) {
					this.comflow.push({
						F_Id: e.F_Id,
						F_Category: e.F_Category,
						F_EnCode: e.F_EnCode,
						F_FullName: e.F_FullName,
						F_Icon: e.F_Icon,
						F_IconBackground: e.F_IconBackground,
						F_Iscom: true,
						F_FormType: e.F_FormType
					});


					for (let i = 0; i < this.flowEngine.length; i++) {
						if (e.F_EnCode == this.flowEngine[i].F_EnCode) {
							this.flowEngine[i].F_Iscom = true
						}
					}
					uni.setStorage({
						key: config.Global.cache + '_appsoftware_key',
						data: this.comflow
					});
					uni.setStorage({
						key: config.Global.cache + '_FlowEngineList',
						data: this.flowEngine
					});
				}
			},

			/* 删除应用 */
			removeflow(e, index) {
				let _flow = this.comflow;
				if (_flow.length > 8) {
					_flow.splice(index, 1);
					for (let i = 0; i < this.flowEngine.length; i++) {
						if (e.F_EnCode == this.flowEngine[i].F_EnCode) {
							this.flowEngine[i].F_Iscom = false
						}
					}
					uni.setStorage({
						key: config.Global.cache + '_appsoftware_key',
						data: this.comflow
					});
					uni.setStorage({
						key: config.Global.cache + '_FlowEngineList',
						data: this.flowEngine
					});
				} else {
					helper.msg('至少保留8个常用应用');
				}
			}
		},
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}

	.uni-grid-9-ico {
		margin-top: 0;
	}

	.badge {
		position: relative;
		/* width: 1em; */
		height: 1.5em;
		left: 29%;
	}

	.common text {
		vertical-align: middle;
		font-size: 36upx;
		font-weight: 450;
		color: #2d3945;
	}
</style>
